<template>
  <div>
    <div style="height: 100%">
      <div class="adapt">
        <div class="wapper">
          <div v-for="(item, index) in skuList" :key="index" class="cart-adapt">
            <!-- 滑动单元格用于删除操作 -->
            <van-swipe-cell class="swipeCell">
              <div class="leftCont">
                <input
                  type="checkbox"
                  v-model="getGoodsSelected[item.id]"
                  class="checkbox"
                  @change="selectedChange(item.id, getGoodsSelected[item.id])"
                />
                <van-card
                  class="cartinfo"
                  :desc="item.description"
                  :title="item.title"
                  :thumb="item.img"
                >
                  <template #tags>
                    <van-tag
                      class="cartinfo-tag"
                      plain
                      v-for="(item2, index2) in item.specs"
                      :key="index2"
                    >
                      {{ item2.value }}
                    </van-tag>
                  </template>
                  <template #bottom>
                    <div class="cart-price">￥{{ item.price }}</div>
                    <van-stepper
                      v-model="getGoodsCount[item.id]"
                      @change="countChanged(item.id, getGoodsCount[item.id])"
                      class="cart-stepper"
                    />
                  </template>
                </van-card>
              </div>
              <!-- 删除 -->
              <template #right>
                <van-button
                  @click="removeCarItem(item.id)"
                  square
                  text="删除"
                  type="danger"
                  class="delete-button"
                ></van-button>
              </template>
            </van-swipe-cell>
          </div>
        </div>
        <!-- 购物车底部操作栏 -->
        <div class="account">
          <van-button class="pay">结算</van-button>
          <div>
            <div class="cart-choice">
              已选:
              <span class="highlight">{{ getSelectedCount }}</span>
              件
            </div>
            <div class="cart-sum">
              合计:
              <span class="highlight">{{ getSelectedAmount }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <nav-bar></nav-bar>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import NavBar from '../components/NavBar.vue'

export default {
  name: 'Shopcart',
  components: { NavBar },
  data() {
    return {
      goodsList: [],
      skuList: [],
    }
  },
  created() {
    this.getSkuDetail()
  },
  computed: {
    ...mapState('shopcart', ['car']),

    ...mapGetters('shopcart', [
      'getGoodsCount',
      'getGoodsSelected',
      'getSelectedCount',
      'getSelectedGoods',
    ]),
    getSelectedAmount() {
      var goods = this.getSelectedGoods
      var amount = 0
      this.skuList.forEach(item => {
        if (goods[item.id]) {
          amount += item.price * goods[item.id].buyAmount
        }
      })
      return amount.toFixed(2)
    },
  },
  methods: {
    countChanged(id, count) {
      this.$store.commit('shopcart/updateGoodsInfo', {
        id: id,
        buyAmount: count,
      })
    },
    removeCarItem(id) {
      this.$store.commit('shopcart/removeCar', id)
      this.getSkuDetail()
    },
    getSkuDetail() {
      let list = this.car.map(item => item.skuId)
      let params = {
        ids: list.join(),
      }
      this.$http.get('/spu/sku', { params: params }).then(res => {
        this.skuList = res.data
      })
    },
    selectedChange(id, val) {
      this.$store.commit('shopcart/updateGoodsSelected', {
        id: id,
        selected: val,
      })
    },
  },
}
</script>

<style scoped>
.adapt {
  overflow: hidden;
  zoom: 1;
}
.wapper {
  overflow: auto;
  height: calc(100vh-50px-50px-46px);
}
.checkbox {
  float: left;
  height: 120px;
  margin: 0 10px;
}
.account {
  position: fixed;
  bottom: 50px;
  height: 50px;
  width: 100%;
  background: rgb(240, 237, 237);
}
.cart-choice {
  float: left;
  line-height: 50px;
  padding-left: 20px;
}
.cart-sum {
  float: right;
  line-height: 50px;
  padding-right: 10px;
}
.pay {
  float: right;
  height: 40px;
  width: 100px;
  color: white;
  background: rgb(105, 134, 140);
  margin-top: 5px;
  margin-right: 5px;
  border-radius: 8px;
  border: none;
}
.delete-button {
  height: 100%;
}
.leftCont {
  border-bottom: 1px solid #eee;
  display: flex;
  height: 100%;
}
.highlight {
  color: rgb(207, 175, 116);
  padding-right: 5px;
}
.cart {
  text-align: left;
  width: 100%;
}
.cartinfo {
  flex: 1;
  float: left;
  font-size: 13px;
  margin: 0;
  background-color: #fff;
}
.cart-price {
  float: left;
  font-size: 18px;
  line-height: 30px;
}
.cart-stepper {
  float: right;
}
.cartinfo-tag {
  margin: 10px 0;
  margin-right: 5px;
}
</style>
